﻿@{
    ViewBag.Title = "看脸时代";
}
@section Head{
    <style>
        html, body, #bg {
            height: 100%;overflow:hidden;
        }

        #bg {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url(../images/face/header.jpg);
            /*filter: blur(10px);*/
            z-index: 0;
        }

        #desc-box {
            width: 100%;
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: rgba(255,255,255,.3);
            color: #fff;
            padding: 10px;
        }

        #desc {
            transition: all linear 0.5s;
            text-align: left;
            overflow: hidden;
            position: absolute;
            top: 130%;
            left: 100%;
            width: 10%;
            color: #fff;
            font-size: 14px;
            background-color: rgba(239, 83, 206,.3);
            padding: 10px 15px;
            -webkit-animation: bgChange 2s linear alternate infinite;
            animation: bgChange 2s linear alternate infinite;
            transition: all linear .75s .25s;
        }

        #desc.active {
            top: 0%;
            left:0;width:70%;
        }

        @@-webkit-keyframes bgChange {
            0% {
                background-color: rgba(239, 83, 206,.3);
            }
            100% {
                background-color: rgba(49, 21, 224,.7);
            }
        }

        @@keyframes bgChange {
            0% {
                background-color: rgba(239, 83, 206,.3);
            }
            100% {
                background-color: rgba(49, 21, 224,.7);
            }
        }

        #fileUpload {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1;
        }

        #scanbar {
            display: none;
            position: absolute;
            left: 5%;
            width: 90%;
            height: 0px;
            background-color: #fff;
            box-shadow: rgba(255,255,255,0.7) 0px 0px 6px 3px;
            -webkit-animation: blink 3s linear alternate infinite;
            animation: blink 3s linear alternate infinite;
        }

        @@-webkit-keyframes blink {
            0% {
                top: 5%;
            }
            100% {
                top: 90%;
            }
        }

        @@keyframes blink {
            0% {
                top: 5%;
            }
            100% {
                top: 90%;
            }
        }

        .mask {
            background: linear-gradient(0deg, #ef53ce 0%, #3115e0 100%);
            background: -webkit-linear-gradient(bottom, #ef53ce 0%, #3115e0 100%);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 0;
            color: #fff;
            transform: scale(0.1);
            transform-origin: right top;
            transition: all linear .75s .25s;
        }

        .mask.active {
            opacity: .9;
            transform: scale(1);
            transition: all linear .75s .25s;
        }

        .menu {
            position: fixed;
            top: 50px;
            right: 20px;
            z-index: 99;
        }

        .menu i {
            width: 30px;
            height: 3px;
            background-color: #fff;
            display: block;
            margin-bottom: 5px;
            transition: all linear .75s .25s;
        }

        .menu.active i:first-child {
            transform: translateY(8px) rotateZ(45deg);
        }

        .menu.active i:last-child {
            transform: translateY(-8px) rotateZ(-45deg);
        }

        .menu.active i:nth-child(2n) {
            opacity: 0;
        }

        .btn-list {
            margin-top: 120px;
        }

        .btn-list a {
            display: block;
            margin: 20px auto;
            border: 2px solid #fff;
            color: #fff;
            border-radius: 5px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
    </style>
}

<div id="scanbar" class="top"></div>
<div id="bg"></div>
<input type="file" capture="user" accept="image/*" name="imgFile" id="fileUpload" onchange="ChangeUploadImg(event,this)" class="uploadCtrl" />
<div id="desc-box" class="am-text-sm am-text-center">
    <span class="am-text-danger">
        *点击图片重新上传识别*<br />
    为了准确检测，请上传个人大头贴
    </span><br />
</div>
<div id="desc">
</div>
<div class="menu">
    <i></i>
    <i></i>
    <i></i>
</div>
<div class="mask">
    <div class="btn-list">
        <a href="#">魅力检测</a>

        <a href="#">头像PK</a>

        <a href="#">PK明星</a>

        <a href="#">头像相似度</a>
    </div>

</div>
@section Scripts{
    <script src="~/Scripts/ajaxfileupload.js"></script>
    <script>
        $(function () {
            $(".menu").click(function () {
                $(this).toggleClass("active");
                $(".mask").toggleClass("active");
            })

        })
        function ChangeUploadImg(evt, obj) {
            var files = evt.target.files; // 获得文件对象
            //检查文件的类型是否符合指定要求
            if (files[0].type.indexOf("image") == -1) {
                amAlert("上传图片必须为jpg/jpeg/png/gif格式");
                $(obj).val('');
            }
            else {
                scanShow();
                $("#desc").removeClass("active");
                var src = getObjectURL(files[0]);
                $("#bg").css({ 'backgroundImage': 'url(' + src + ')' });
                UploadImg();
            }
        }

        function UploadImg() {
            $("#desc").text("").removeClass("active");
            var id = 123123;
            $.ajaxFileUpload({
                url: "FaceDetect?imgid=" + id,
                secureuri: false,
                fileElementId: "fileUpload",
                dataType: 'text',
                success: function (msg) {
                    scanHide();
       
                    var result = msg.split('>')[1].split('<')[0];
                    $("#desc").text(result).addClass("active");;
                    var jsonStr = JSON.parse(result);
                    console.log(result, jsonStr);
                    if (jsonStr.state == "success") {                        
                        $("#desc").text(jsonStr.content).addClass("active");;
                    }
                    else {
                        amAlert('图片识别失败，请换张只有一个人的大头贴！');
                    }
                },
                error: function (msg, e) {
                    scanHide();
                    amAlert('照片识别失败');
                }
            });
        }

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        }

        function scanShow() {
            $("#scanbar").fadeIn();
        }
        function scanHide() {
            $("#scanbar").fadeOut();
        }
        function scanToggle() {
            if ($("#scanbar").hasClass("top")) {
                $("#scanbar").removeClass("top").addClass("bot");
            }
            else {
                $("#scanbar").removeClass("bot").addClass("top");
            }
        }
    </script>
}